<template>
  <div class="warp-box clearfix">
    <div class="warp-con">
      <div class="header">
        <div class="headerWrapper">
          <div class="search">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-date-picker v-model="searchForm.createDate" :default-time="['00:00:00', '23:59:59']"
                                start-placeholder="创建时间" range-separator="至" end-placeholder="创建时间" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss" type="daterange" />
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入种质名称" v-model="searchForm.grName" clearable/>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入种名" v-model="searchForm.speName" clearable/>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入原编号" v-model="searchForm.originalNo" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="addDialog" v-if="addBtn">新增</el-button>
                <el-button type="primary" @click="importVisible = true" v-if="importBtn">导入</el-button>
                <el-dropdown @command="exportTmpVal" class="exportMenu" trigger="click" v-if="exportBtn">
                  <el-button type="primary">
                    导出<i class="el-icon-arrow-down el-icon--right"/>
                  </el-button>
                  <el-dropdown-menu slot="dropdown" style="background-color: rgb(21 120 176)">
                    <el-dropdown-item :command="false">
                      选择
                    </el-dropdown-item>
                    <el-dropdown-item :command="true">
                      全部
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="content">
        <el-table v-loading="loading" :data="tableData" element-loading-text="拼命加载中" ref="multipleTable"
                  element-loading-spinner="el-icon-loading" :max-height="635"
                  element-loading-background="rgba(0, 0, 0, 0.8)"
                  @select="handleSelect" @select-all="handleSelectAll" border stripe>
          <el-table-column align="center" type="selection" v-if="exportBtn"/>
          <el-table-column prop="createdTime" show-overflow-tooltip label="创建时间" align="center"/>
          <el-table-column prop="grName" show-overflow-tooltip label="种质名称" align="center"/>
          <el-table-column prop="speName" show-overflow-tooltip label="种名" align="center"/>
          <el-table-column prop="originalNo" show-overflow-tooltip label="原编号" align="center"/>
          <el-table-column prop="sourceType" show-overflow-tooltip label="来源类型" align="center"/>
          <el-table-column prop="feaMain" show-overflow-tooltip label="主要特性" align="center"/>
          <el-table-column prop="grSource" show-overflow-tooltip label="种质来源地" align="center"/>
          <!--<el-table-column show-overflow-tooltip label="图片" align="center">
            <template slot-scope="scope">
              <el-image v-for="(img, i) in scope.row.fileList" :key="i" :preview-src-list="[FILE_SERVER+img.path]"
                        class="table-img"
                        :src="FILE_SERVER+img.path" @click="handleClose">
              </el-image>
            </template>
          </el-table-column>-->
          <el-table-column fixed="right" label="操作" align="center" width="300">
            <template slot-scope="scope">
              <span class="pointer" @click="read(scope.row)">查看</span>
              <span v-if="codeBtn" @click="initQrCode(scope.row)" class="pointer"><i class="line"></i>扫码</span>
              <span v-if="updateBtn" class="pointer" @click="updateDialog(scope.row)"> <i class="line"></i>修改</span>
              <span v-if="deleteBtn" class="pointer" @click="removeData(scope.row)"> <i class="line"></i>删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination :page-size="this.pageSize" :page-sizes="[10,20,50]" :total="tableDataTotalCount"
                       @current-change="handleCurrentChange" @size-change="handleSizeChange" background
                       layout="total, sizes, prev, pager, next, jumper"/>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" width="850px" :title="formTitle" :before-close="cancel"
               :close-on-click-modal="false">
      <el-form :model="addForm" ref="ruleForm" label-width="140px" label-position="left" class="demo-ruleForm">
        <div class="form-table_col4">
          <table border="1" width="100%">
            <tr>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                种质名称
              </td>
              <td colspan="3">
                <el-input v-model="addForm.grName" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                原编号
              </td>
              <td>
                <el-input v-model="addForm.originalNo" :disabled="disabled"/>
              </td>
              <td class="form-item_label">种质来源</td>
              <td>
                <el-select clearable v-model="addForm.source" :disabled="disabled">
                  <el-option v-for="(item, i) in source" :key="i" :label="item" :value="item"/>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="form-item_label">种名</td>
              <td>
                <el-select filterable v-model="addForm.speName" @change="speciesChange" clearable :disabled="disabled">
                  <el-option :key="item.id" :label="item.speciesName" :value="item.speciesName"
                             v-for="item in speciesData"/>
                </el-select>
              </td>
              <td>拉丁名</td>
              <td>
                <el-input class="oblique" v-model="addForm.speLaName" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td class="form-item_label">生活型</td>
              <td>
                <el-select clearable v-model="addForm.lifeStyle" :disabled="disabled">
                  <el-option v-for="(item, i) in lifeStyle" :key="i" :label="item" :value="item"/>
                </el-select>
              </td>
              <td class="form-item_label">常绿性</td>
              <td>
                <el-select clearable v-model="addForm.evergreen" :disabled="disabled">
                  <el-option v-for="(item, i) in evergreen" :label="item" :value="item" :key="i"/>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="form-item_label">种质来源类型</td>
              <td>
                <el-select clearable v-model="addForm.sourceType" :disabled="disabled">
                  <el-option v-for="(item, i) in sourceType" :label="item" :value="item" :key="i"/>
                </el-select>
              </td>
              <td class="form-item_label">主要特性</td>
              <td>
                <el-select multiple filterable allow-create default-first-option :disabled="disabled"
                           placeholder="请输入或选择主要特性" v-model="addForm.feaMain">
                  <el-option v-for="(item, i) in feaMain" :label="item" :value="item" :key="i"/>
                </el-select>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">
                特异性特征
              </td>
              <td colspan="3">
                <el-input type="textarea" v-model="addForm.feaSpec" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td class="form-item_label">用途</td>
              <td>
                <el-select multiple filterable allow-create :disabled="disabled" default-first-option
                           placeholder="请输入或选择用途" v-model="addForm.purpose">
                  <el-option v-for="(item, i) in purpose" :label="item" :value="item" :key="i"/>
                </el-select>
              </td>
              <td style="display: table-cell; vertical-align: middle">
                种质来源地
              </td>
              <td>
                <el-input v-model="addForm.grSource" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">
                原产地备注
              </td>
              <td colspan="3">
                <el-input type="textarea" v-model="addForm.remarksCo" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">
                种质来源地备注
              </td>
              <td colspan="3">
                <el-input type="textarea" v-model="addForm.remarksSt" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
<!--              <td style="display: table-cell; vertical-align: middle">-->
<!--                林分面积-->
<!--              </td>-->
<!--              <td>-->
<!--                <el-input v-model="addForm.standArea" :disabled="disabled"/>-->
<!--              </td>-->
              <td style="display: table-cell; vertical-align: middle">林龄</td>
              <td>
                <el-input v-model="addForm.forestAge" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">林相</td>
              <td colspan="3">
                <el-input v-model="addForm.forestApp" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                采集点联系人
              </td>
              <td>
                <el-input v-model="addForm.coContacts" :disabled="disabled"/>
              </td>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                采集点联系电话
              </td>
              <td>
                <el-input v-model="addForm.coPhone" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                采集人
              </td>
              <td>
                <el-input v-model="addForm.collector" :disabled="disabled"/>
              </td>
              <td class="form-item_label" style="display: table-cell; vertical-align: middle">
                采集时间
              </td>
              <td>
                <el-date-picker v-model="addForm.coTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                                :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">
                登记人员
              </td>
              <td colspan="3">
                <el-input v-model="addForm.regPer" disabled/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">
                登记单位
              </td>
              <td>
                <SelectTree :options="departmentData" :value="addForm.regUnit" :clearable="true" :accordion="false"
                            :disabled="true"/>
              </td>
              <td style="display: table-cell; vertical-align: middle">
                登记时间
              </td>
              <td>
                <el-date-picker v-model="addForm.regTime" disabled type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd"/>
              </td>
            </tr>
<!--            <tr>-->
<!--              <td style="display: table-cell; vertical-align: middle">经度</td>-->
<!--              <td>-->
<!--                &lt;!&ndash; <el-input v-model="addForm.lon" :disabled="disabled"/> &ndash;&gt;-->
<!--                <LonLat ref="lonRef" @child-event="lonEvent"  v-if ="isReady" :msg-val="chilLon" :disabled="disabled"/>-->
<!--              </td>-->
<!--              <td style="display: table-cell; vertical-align: middle">纬度</td>-->
<!--              <td>-->
<!--                <LonLat ref="latRef" @child-event="latEvent"  v-if ="isReady"  :msg-val="chilLat" :disabled="disabled"/>-->
<!--                &lt;!&ndash; <el-input v-model="addForm.lat" :disabled="disabled"/> &ndash;&gt;-->
<!--              </td>-->
<!--            </tr>-->
            <tr>
              <td style="display: table-cell; vertical-align: middle">高度</td>
              <td>
                <el-input v-model="addForm.alt" :disabled="disabled"/>
              </td>
<!--              <td style="display: table-cell; vertical-align: middle">坡位</td>-->
<!--              <td>-->
<!--                <el-input v-model="addForm.slPos" :disabled="disabled"/>-->
<!--              </td>-->
            </tr>
<!--            <tr>-->
<!--              <td style="display: table-cell; vertical-align: middle">坡向</td>-->
<!--              <td>-->
<!--                <el-input v-model="addForm.aspect" :disabled="disabled"/>-->
<!--              </td>-->
<!--              <td style="display: table-cell; vertical-align: middle">坡度</td>-->
<!--              <td>-->
<!--                <el-input v-model="addForm.slope" :disabled="disabled"/>-->
<!--              </td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--              <td style="display: table-cell; vertical-align: middle">-->
<!--                土壤类型-->
<!--              </td>-->
<!--              <td>-->
<!--                <el-select clearable v-model="addForm.soilType" :disabled="disabled">-->
<!--                  <el-option v-for="(item, i) in soilType" :label="item" :value="item" :key="i"/>-->
<!--                </el-select>-->
<!--              </td>-->
<!--              <td style="display: table-cell; vertical-align: middle">-->
<!--                立地条件-->
<!--              </td>-->
<!--              <td>-->
<!--                <el-input v-model="addForm.siteCond" :disabled="disabled"/>-->
<!--              </td>-->
<!--            </tr>-->
            <tr>
              <td style="display: table-cell; vertical-align: middle">选填项1</td>
              <td colspan="3">
                <el-input v-model="addForm.optional1" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">选填项2</td>
              <td colspan="3">
                <el-input v-model="addForm.optional2" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">选填项3</td>
              <td colspan="3">
                <el-input v-model="addForm.optional3" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td style="display: table-cell; vertical-align: middle">选填项4</td>
              <td colspan="3">
                <el-input v-model="addForm.optional4" :disabled="disabled"/>
              </td>
            </tr>
<!--            <tr>-->
<!--              <td style="display: table-cell; vertical-align: middle">备注</td>-->
<!--              <td colspan="3">-->
<!--                <el-input type="textarea" v-model="addForm.remarks" :disabled="disabled"/>-->
<!--              </td>-->
<!--            </tr>-->
          </table>
          <div style="margin-top: 20px">
            <!-- <el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :on-remove="handleRemove"
                :file-list="fileList" :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload> -->
            <el-form-item label="图片上传:" required="true">
              <el-upload action="#" list-type="picture-card" :file-list="fileList" :auto-upload="false"
                         :on-change="handleChange" :accept="'image/*'" ref="upload" :disabled="disabled">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" style="min-height: 146px"/>
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <div class="preview">
                <el-dialog title="预览" :visible.sync="dialogVisible" :modal="false" width="1200px" top="50px">
                  <img :src="dialogImageUrl" alt=""/>
                </el-dialog>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="formEdit !== 'read'" class="dialogBtn" type="primary" @click="saveData">保 存
        </el-button>
        <el-button type="primary" @click="cancel" class="dialogBtn">关 闭
        </el-button>
      </div>
    </el-dialog>
    <!-- 二维码弹框 -->
    <el-dialog width="540px" title="扫码查看详情" :close-on-click-modal="false" :visible.sync="qrCodeVisible">
      <div style="margin: 0 auto; text-align: center;">
        <canvas id="QRCode" style="margin: 0 auto" ref="qrCodeDiv"/>
      </div>
      <div style="display: flex;justify-content: space-between;margin-top:28px">
        <div><span>种质名称：</span><span style="color: #0fff;">{{ tableRow.grName }}</span></div>
        <div><span>种名：</span><span style="color: #0fff;">{{ tableRow.speName }}</span></div>
        <div><span>拉丁名：</span><span style="font-style:oblique;color: #0fff;">{{ tableRow.speLaName }}</span></div>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="qrCodeVisible = false" class="dialogBtn" type="primary">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导入采集登记" :visible.sync="importVisible" class="import" width="30%" :close-on-click-modal="false">
      <div style="text-align: center">
        <el-upload drag :action="uploadAction" class="upload-demo" :show-file-list="false" :headers="uploadHeader"
                   :before-upload="beforeUpload" :on-success="handleSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传xls/xlsx文件，
            <el-button type="text" @click="downloadExcel">下载模板</el-button>
          </div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import systemApi from '../../../api/systemApi'
import resourceApi from '@/api/resourceApi'
import QRCode from 'qrcode'
import SelectTree from '@/components/TreeSelect'
import LonLat from '../../../components/LatLon'

export default {
  name: 'gatherRegister',
  components: {
    SelectTree,
    LonLat
  },
  data () {
    return {
      loading: false,
      dataError: '',
      FILE_SERVER: process.env.FILE_SERVER,
      searchForm: {
        speName: null,
        createDate: null
      },
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      tableData: [],
      speciesData: [],
      addForm: {},
      formEdit: null,
      formTitle: null,
      dialogFormVisible: false,
      source: ['区内', '区外', '国外'],
      lifeStyle: ['乔木', '灌木', '竹类', '藤本、草木', '其他'],
      evergreen: ['常绿', '落叶', '半常绿'],
      sourceType: [
        '野生群体',
        '野生个体',
        '地方品种',
        '选育品种',
        '遗传材料',
        '古树名木',
        '其他',
        '引进品种'
      ],
      feaMain: [
        '速生',
        '高产',
        '优质',
        '抗病',
        '抗虫',
        '抗干旱',
        '抗冻害',
        '耐瘠薄',
        '耐水湿',
        '耐盐碱',
        '抗污染',
        '其他'
      ],
      purpose: ['用材', '生态', '观赏', '化工原料', '药用', '食用', '其他'],
      soilType: ['砖红壤', '赤红壤', '黄壤', '黄红壤'],
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      disabled: false,
      speciesMap: {},
      departmentData: [],
      addBtn: false,
      updateBtn: false,
      deleteBtn: false,
      importBtn: false,
      exportBtn: false,
      codeBtn: false,
      importVisible: false,
      uploadHeader: {
        token: `${window.localStorage.token}`
      },
      uploadAction: process.env.SURVEY_DOMAIN + '/gr/register/gather/excelImport',
      onlyId: [],
      tableRow: {},
      qrCodeVisible: false,
      chilLon:'',
      chilLat:'',
      isReady:false
    }
  },
  computed: {
    tableDataTotalCount () {
      return this.totalCount ? this.totalCount : 0
    }
  },
  created () {
    this.initBtn();
    this.getSpecies();
    this.findDepartment();
    this.findPageData();
  },
  beforeDestroy () {
    window.removeEventListener('click', this.imgClose)
  },
  methods: {
    findDepartment () {
      systemApi.getDeparmentList().then((res) => {
        if (res.data.message === 'success') {
          this.departmentData = res.data.result
        } else {
          this.departmentData = []
        }
      })
    },
    downloadExcel () {
      resourceApi.downloadExcel('/gr/register/gather/downloadExcel', null)
    },
    handleClose () {
      this.$nextTick(() => {
        let elImage = document.getElementsByClassName(
          'el-image-viewer__wrapper'
        )[0]
        if (elImage) {
          elImage.addEventListener('click', this.imgClose) // 图片放大后点击屏幕关闭
        }
      })
    },
    imgClose () {
      let close = document.getElementsByClassName('el-image-viewer__close')[0]
      close.click()
    },
    query () {
      this.pageIndex = 1
      this.clearSelection()
      this.findPageData()
    },
    findPageData () {
      this.loading = true
      let createDate = this.searchForm.createDate
      resourceApi.findRegisterGatherPage({
        grName: this.searchForm.grName,
        speName: this.searchForm.speName,
        originalNo: this.searchForm.originalNo,
        startTime: createDate ? createDate[0] : null,
        endTime: createDate ? createDate[1] : null,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        order: 'DESC'
      }).then((res) => {
        this.loading = false
        if (res.data.messageCode === '200') {
          this.tableData = res.data.result.rows
          this.totalCount = res.data.result.totalCount

          let onlyId = this.onlyId
          if (onlyId.length > 0) {
            this.$nextTick(() => {
              this.tableData.forEach((row) => {
                for (let i in onlyId) {
                  let id = onlyId[i]
                  if (row.id === id) {
                    this.$refs.multipleTable.toggleRowSelection(row)
                    break
                  }
                }
              })
            })
          }
        } else {
          this.tableData = []
          this.totalCount = 0
        }
      })
    },
    pager (val) {
      this.pageIndex = val
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.tableData = []
      this.findPageData()
    },
    handleCurrentChange (val) {
      this.pageIndex = val
      this.tableData = []
      this.findPageData()
    },
    getSpecies () {
      this.speciesMap = {}
      this.speciesData = []
      resourceApi.findSpecies().then((res) => {
        let result = res.data.result
        if (res.data.message === 'success' && result) {
          this.speciesData = result
          for (let key in result) {
            let data = result[key]
            this.$set(this.speciesMap, data.speciesName, data)
          }
        }
      })
    },
    speciesChange (value) {
      let latinName = '';
      let species = this.speciesMap[value];
      if (species && species.latinName) {
        latinName = species.latinName;
      }
      this.$set(this.addForm, 'speLaName', latinName);
    },
    addDialog () {
      this.formEdit = 'add'
      this.formTitle = '新增采集登记'
      this.isReady = true;
      let now = new Date()
      let year = now.getFullYear()
      let month = (now.getMonth() + 1).toString().padStart(2, '0')
      let date = year + '-' + month + '-' + now.getDate()
      this.$set(this.addForm, 'coTime', date)
      this.$set(this.addForm, 'regTime', date)
      let user = JSON.parse(localStorage.getItem('user'))
      this.addForm.regPer = user.userName
      this.addForm.regUnit = user.departmentId
      this.dialogFormVisible = true
    },
    saveData: function () {
      if (!this.addForm.originalNo) {
        this.$message({
          message: '请输入原编号',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.grName) {
        this.$message({
          message: '请输入种质名称',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.source) {
        this.$message({
          message: '请选择种质来源',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.speName) {
        this.$message({
          message: '请选择种名',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.lifeStyle) {
        this.$message({
          message: '请选择生活型',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.evergreen) {
        this.$message({
          message: '请选择常绿性',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.sourceType) {
        this.$message({
          message: '请选择种质来源类型',
          type: 'warning'
        })
        return false
      }
       if (!this.addForm.feaMain || this.addForm.feaMain.length === 0) {
        this.$message({
          message: '请选择主要特性',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.purpose || this.addForm.purpose.length === 0) {
        this.$message({
          message: '请选择用途',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.coContacts) {
        this.$message({
          message: '请输入采集点联系人',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.coPhone) {
        this.$message({
          message: '请输入采集点联系电话',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.collector) {
        this.$message({
          message: '请输入采集人',
          type: 'warning'
        })
        return false
      }
      if (!this.addForm.coTime) {
        this.$message({
          message: '请输入采集时间',
          type: 'warning'
        })
        return false
      }
      if (!this.fileList || this.fileList.length === 0) {
        this.$message({
          message: '图片不能为空',
          type: 'warning'
        })
        return false
      }
      this.showLoading()
      const formData = new FormData()
      for (let i in this.fileList) {
        let file = this.fileList[i]
        if (!file.id) {
          formData.append('upFiles', file.raw)
        }
      }
      for (let key in this.addForm) {
        if (key === 'parentIdArr') continue
        let value = this.addForm[key]
        if (value != null) {
          formData.append(key, value)
        }
      }
      resourceApi.saveRegisterGather(formData).then((res) => {
        this.hideLoading()
        let message = this.formEdit === 'edit' ? '修改' : '保存'
        if (res.data.messageType === '0') {
          this.$notify({
            title: '消息',
            message: message + '成功！',
            position: 'bottom-right',
            showClose: false,
            type: 'success'
          })
          this.cancel()
          this.findPageData()
        } else {
          this.$notify.error({
            title: '消息',
            message: message + '失败'
          })
        }
      })
    },
    updateDialog (row) {
      this.formEdit = 'edit'
      this.formTitle = '修改采集登记'
      this.getInfo(row)
    },
    read (row) {
      this.disabled = true
      this.formEdit = 'read'
      this.formTitle = '查看采集登记'
      this.getInfo(row)
    },
    //经度
    lonEvent(val){
      this.addForm.lon = val;
    },

    latEvent(val){
      this.addForm.lat = val;
    },
    async getInfo (row) {
      const res = await resourceApi.getRegisterGatherInfo(row.id)
      if (res.data.message === 'success') {
        this.addForm = res.data.result;
        this.chilLon = this.addForm.lon;
          this.chilLat = this.addForm.lat;
          this.isReady = true
        if (this.addForm.feaMain != null) {
          const arr = this.addForm.feaMain.split(',')
          this.addForm.feaMain = arr
        }
        if (this.addForm.purpose != null) {
          const arr = this.addForm.purpose.split(',')
          this.addForm.purpose = arr
        }
        this.addForm.fileList.forEach((item) => {
          item.url = this.FILE_SERVER + item.path
          this.fileList.push(item)
        })
        this.dialogFormVisible = true
      }
    },
    removeData (row) {
      let tips = ''
      if (row) {
        tips = `此操作将删除: ${row.grName}, 是否继续?`
      } else {
        return
      }
      this.$confirm(tips, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resourceApi.deleteRegisterGather(row.id).then((res) => {
          if (res.data.messageType === '0') {
            this.$notify({
              title: '消息',
              message: '删除成功！',
              position: 'bottom-right',
              showClose: false,
              type: 'success'
            })
            this.findPageData()
          }
        })
      }).catch((error) => {
        console.log(error)
      })
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = this.FILE_SERVER + file.url
      this.dialogVisible = true
    },
    handleRemove (file) {
      if (file.id) {
        this.$confirm('确定删除该附件吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resourceApi.delGatherPic(file.id).then((res) => {
            if (res.data.messageCode === '200') {
              this.$notify({
                title: '消息',
                message: '删除成功！',
                position: 'bottom-right',
                showClose: false,
                type: 'success'
              })
              for (let i in this.fileList) {
                let item = this.fileList[i]
                if (item.id === file.id) {
                  this.fileList.splice(i, 1)
                  break
                }
              }
            }
          })
        })
      } else {
        this.fileList.forEach((item, index) => {
          if (item.uid === file.uid) {
            this.fileList.splice(index, 1)
          }
        })
      }
    },
    handleChange (file, fileList) {
      this.fileList.push(file)
        if(!((file.raw.type === 'image/png' || file.raw.type === 'image/gif' || file.raw.type === 'image/jpg' || file.raw.type === 'image/jpeg' || file.raw.type === 'image/PNG' || file.raw.type === 'image/JPG' || file.raw.type === 'image/JPEG'))){
          this.handleRemove(file);
          this.$message({
            message: '只能上传图片文件',
            type: 'warning'
          });
      }
    },
    cancel () {
      this.addForm = {}
      this.fileList = []
      this.disabled = false
      this.dialogFormVisible = false
      this.isReady = false;
      this.$refs.lonRef.initData();
      this.$refs.latRef.initData();
    },
    initQrCode (row) {
      this.tableRow = row
      this.qrCodeVisible = true
      this.$nextTick(() => {
        this.$refs.qrCodeDiv.innerHTML = ''
        let curl = row.id.toUpperCase()
        QRCode.toCanvas(this.$refs.qrCodeDiv, curl, {
          width: 300,
          height: 300,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff' // 二维码背景色
        }, function (error) {
          if (error) console.error(error)
        })
      })
    },
    showLoading () {
      this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    hideLoading () {
      this.$loading().close()
    },
    initBtn () {
      let permissionBtn = JSON.parse(localStorage.permissionBtn)
      this.addBtn = permissionBtn['gather_register_add']
      this.updateBtn = permissionBtn['gather_register_update']
      this.deleteBtn = permissionBtn['gather_register_delete']
      this.importBtn = permissionBtn['gather_register_import']
      this.exportBtn = permissionBtn['gather_register_export']
      this.codeBtn = permissionBtn['gather_register_code']
    },
    beforeUpload (file) {
      let flag = false
      let name = file.name
      if (name.indexOf('.') > -1) {
        let suffix = name.substring(name.lastIndexOf('.') + 1, name.length)
        if (suffix === 'xls' || suffix === 'xlsx') {
          flag = true
        }
      }
      if (!flag) {
        this.$message({
          message: '只能上传xls/xlsx文件',
          type: 'warning'
        })
      } else {
        this.showLoading()
      }
      return flag
    },
    handleSuccess (res, file, fileList) {
      this.hideLoading()
      if (res.message === 'success') {
        this.findPageData()
        this.importVisible = false
        this.$message({
          message: '导入成功',
          type: 'success'
        })
      } else {
        let message = res.message
        if (message && message.indexOf(':') > -1) {
          message = message.substring(message.lastIndexOf(':') + 1, message.length)
        }
        this.$message.error(message || '导入失败')
      }
    },
    handleSelect (selection, row) {
      let id = row.id
      let checked = false
      for (let i in selection) {
        let item = selection[i]
        if (item.id === id) {
          checked = true
          break
        }
      }
      if (checked) {
        this.onlyId.push(id)
      } else {
        let index = this.onlyId.indexOf(id)
        this.onlyId.splice(index, 1)
      }
    },
    handleSelectAll (selection) {
      if (selection.length > 0) {
        for (let i in selection) {
          let item = selection[i]
          if (this.onlyId.indexOf(item.id) === -1) {
            this.onlyId.push(item.id)
          }
        }
      } else {
        let data = this.tableData
        for (let i in data) {
          let item = data[i]
          let index = this.onlyId.indexOf(item.id)
          if (index !== -1) {
            this.onlyId.splice(index, 1)
          }
        }
      }
    },
    clearSelection () {
      this.onlyId = []
      this.$refs.multipleTable.clearSelection()
    },
    async exportTmpVal (isAll) {
      if (!isAll) {
        if (this.onlyId.length === 0) {
          this.$message({
            message: '请选择需要导出的数据',
            type: 'warning'
          })
          return false
        }
      }

      let loading = this.$loading({
        lock: true,
        text: '数据导出中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      let time = this.searchForm.createDate
      let params = {
        isAll: isAll,
        onlyId: this.onlyId,
        start: time ? time[0] : null,
        end: time ? time[1] : null,
        name: this.searchForm.speName,
        grName: this.searchForm.grName
      }
      let url = '/gr/register/gather/exportExcel'
      await resourceApi.downloadExcel(url, params)
      loading.close()
      this.clearSelection()
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  & /deep/ .el-form-item__label {
    font-size: 1.8rem;
  }
}

.el-form-item__label {
  padding: 0 20px 0 0 !important;
}

.table-img {
  height: 30px;
  width: 30px;
  margin-right: 5px;
  cursor: pointer;
}

.footer {
  margin-top: 40px;
  color: #ffffff;
  font-size: 16px;

  .info {
    .select {
      width: 52px;
      height: 35px;
    }

    .select /deep/ .el-input__inner {
      padding-left: 5px;
      padding-right: 0;
    }

    .select /deep/ .el-input__icon {
      width: 15px;
    }

    .select /deep/ .el-select__caret {
      /*transform:rotate(270deg);*/
      /*color: black;*/
    }

    .select /deep/ .el-select__caret.is-reverse {
    }
  }

  .paging {
    /*background-color: pink;*/
    text-align: right;
    padding-right: 30px;
    margin-top: -20px;

    & /deep/ .el-pagination.is-background .btn-prev {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pagination.is-background .btn-next {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pager li {
      background: none;
      border: 1px solid rgba(0, 255, 255, 1);
    }

    & /deep/ .el-pagination__total,
    & /deep/ .el-pagination__sizes {
      float: left;
      font-size: 1.6rem;
      height: 35px;
      line-height: 35px;
    }

    & /deep/ .el-input__inner {
      height: 35px;
    }

    & /deep/ .el-input .el-input__inner {
      padding-right: 20px;
      color: #ffffff;
      font-size: 1.6rem;
    }
  }
}

.content {
  margin-top: 10px;

  & /deep/ .el-checkbox__inner {
    height: 20px;
    width: 20px;
    font-size: 28px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: none;
  }

  & /deep/ .el-tooltip__popper {
    background-color: red;
  }

  & /deep/ .el-checkbox__inner::after {
    border-width: 2px;
    /* border-color: black; */
    height: 6px;
    left: 6px;
    top: 3px;
    width: 4px;
  }

  & /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
    top: 8px;
    background: white;
  }
}

.line {
  display: inline-flex;
  height: 21px;
  width: 1px;
  background: rgba(0, 255, 255, 1);
  margin: 0 10px;
  vertical-align: middle;
}

.dialogBtn {
  font-size: 1.6rem;

  &:hover {
    background: rgba(12, 161, 151, 1);
  }
}

.coordinate {
  width: 25%;
}

#QRCode {
  display: flex;
  justify-content: center;
}

.import {
  /deep/ .el-dialog__body {
    border-bottom: 1px solid #1f5aab;
  }
}

.exportMenu {
  margin-left: 10px;
}

/deep/ .el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #ffffff;
  background-color: #32f1ff16;
}
</style>
<style lang="less">
/**
     * 修改样式   覆盖默认的饿了么全局样式
     */
.el-upload-dragger {
  background-color: transparent;
}

.el-form-item__label {
  padding: 0 20px 0 0 !important;
}

.preview {
  .el-dialog__header {
    padding-left: 40px;
    line-height: 20px;
  }

  .el-dialog__body {
    border-bottom: 1px solid #1f5aab;
    height: 100% !important;
    max-height: 100%;
    overflow: hidden;
    padding: 4px;
    display: flex;
    justify-content: center;
  }

  img {
    height: 78vh;
    width: auto;
    text-align: center;
    object-fit: fill;
  }
}
</style>
